<template>
    <div>
    <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <i class="el-icon-arrow-left" @click="goback">返回上一级</i>
    </div>
        <div class="table-layout">
            <el-row>
                <el-col :span="4" class="table-cell-title">商品编号</el-col>
                <el-col :span="4" class="table-cell-title">spu编号</el-col>
                <el-col :span="4" class="table-cell-title">商品主图</el-col>
                <el-col :span="4" class="table-cell-title">商品名称</el-col>
                <el-col :span="4" class="table-cell-title">进价</el-col>
                <el-col :span="4" class="table-cell-title">售价</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{product.id}}</el-col>
                <el-col :span="4" class="table-cell">{{product.spu}}</el-col>
                <el-col :span="4" class="table-cell"><img style="width:38%" :src="mainImage"></el-col>
                <el-col :span="4" class="table-cell">{{product.name}}</el-col><!--{{order.payType | formatPayType}}-->
                <el-col :span="4" class="table-cell">{{product.packageList}}元</el-col><!--{{order.sourceType | formatSourceType}}-->
                <el-col :span="4" class="table-cell">{{product.price}}元</el-col><!--{{order.orderType | formatOrderType}}-->
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell-title">库存</el-col>
                <el-col :span="4" class="table-cell-title">品牌</el-col>
                <el-col :span="4" class="table-cell-title">商品规格</el-col>
                <el-col :span="4" class="table-cell-title">新品</el-col>
                <el-col :span="4" class="table-cell-title">热门</el-col>
                <el-col :span="4" class="table-cell-title">轮播</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{product.stock}}部</el-col><!---->
                <el-col :span="4" class="table-cell">{{brandName}}</el-col><!---->
                <el-col :span="4" class="table-cell">{{product.defaultItemId}}</el-col><!--{{order.autoConfirmDay}}天-->
                <el-col :span="4" class="table-cell">{{isnew}}</el-col><!--{{order.integration}}-->
                <el-col :span="4" class="table-cell">{{ishot}}</el-col><!--{{order.growth}}-->
                <el-col :span="4" class="table-cell">{{isbanner}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell-title">上市时间</el-col>
                <el-col :span="4" class="table-cell-title">可积分兑换</el-col>
                <el-col :span="4" class="table-cell-title">卖家</el-col>
                <el-col :span="4" class="table-cell-title">审核状态</el-col>
                <el-col :span="4" class="table-cell-title"></el-col>
                <el-col :span="4" class="table-cell-title"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{product.createTime}}</el-col>
                <el-col :span="4" class="table-cell">{{saleService}}</el-col>
                <el-col :span="4" class="table-cell">{{sysUserName}}</el-col>
                <el-col :span="4" class="table-cell">{{status}}</el-col><!--{{order.payType | formatPayType}}-->
                <el-col :span="4" class="table-cell">暂无</el-col><!--{{order.sourceType | formatSourceType}}-->
                <el-col :span="4" class="table-cell">暂无</el-col><!--{{order.orderType | formatOrderType}}-->
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductDetail",
        data(){
            return{
                productId:'',
                product:{},
                mainImage:null,
                brandName:'',
                isnew:'',
                ishot:'',
                isbanner:'',
                saleService:'',
                status:'',
                sysUserName:'',

            }
        },
        created(){
            var user = sessionStorage.getItem('user');
            if (user) {
                user = JSON.parse(user);
                this.sysUserName = user.username;
            }
            this.productId = this.$route.params.productId;
            this.getProDetail();
        },
        methods:{
            getProDetail(){
                this.service.get("/product/manage/product/detail.do",{
                    params:{
                        productId:this.productId
                    }
                }).then(res=>{
                    if (res.status==200){
                        console.log(res.data.data);
                        this.product = res.data.data;
                        this.mainImage = 'http://img.cdn.imbession.top/'+res.data.data.mainImage
                        this.service.get("/product/manage/productBrand/search.do",{
                            params:{
                                brandId:res.data.data.brandId
                            }
                        }).then(ref=>{
                            //console.log(ref)
                            if (ref.status== 200) {
                                this.brandName = ref.data.data.list[0].name;
                            }
                        });
                        if (res.data.data.new){
                            this.isnew = '是';
                        } else{
                            this.isnew = '否';
                        }
                        if (res.data.data.hot){
                            this.ishot = '是';
                        } else{
                            this.ishot = '否';
                        }
                        if (res.data.data.banner){
                            this.isbanner = '是';
                        } else{
                            this.isbanner = '否';
                        }
                        if (res.data.data.saleService){
                            this.saleService = '是';
                        } else{
                            this.saleService = '否';
                        }
                        if (res.data.data.status==1){
                            this.status = '审核通过';
                        } else{
                            this.status = '审核未通过';
                        }
                    }
                })
            },
            goback(){
                this.$router.go(-1);
            }
        },
    }
</script>

<style scoped>
    .table-cell {
        height: 120px;
        line-height: 100px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;

    }

    .table-cell-title {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;

    }
    .el-icon-arrow-left{
        font-size: 16px;
        line-height: 50px;
        font-weight: 400;
    }
</style>